<template>
  <div class="home-page-wrap">
    <div class="wrap-title">
      {{ $t('home.deviceDistribution') }}
    </div>
    <!-- 中国地图接入 -->
    <div class="map-wrapper four-border-blueBg">
      <p class="map-title">{{ $t('home.access') }}</p>
      <div class="map-wrap">
        <!-- 右上角的登记图表 -->
        <div class="legend-wrap">
          <div v-for="item in levelArr" :key="item.level" class="item">
            <img :src="item.url" />
            <span class="text">{{ item.level }}</span>
          </div>
        </div>
        <!-- 右下角的饼图统计 -->
        <div class="right-wrap">
          <div class="deviceChart-head">
            <p class="title-size">
              {{ $t('table.deviceActiveStatus') }}
            </p>
            <el-radio-group
              v-model="daysType"
              class="deviceChart-dayWeek"
              size="default"
              @change="daysTypeUpdate"
            >
              <el-radio-button value="1">{{
                $t('public.day')
              }}</el-radio-button>
              <el-radio-button value="30">{{
                $t('public.month')
              }}</el-radio-button>
            </el-radio-group>
          </div>
          <el-row type="flex" justify="center" class="table-top">
            <el-col :span="6" :lg="8">
              <div
                class="light-color text-hide"
                :title="deviceActiveRate && deviceActiveRate.rate"
              >
                {{ deviceActiveRate && deviceActiveRate.rate }}
              </div>
              <div class="dark-color">
                {{ $t('table.deviceActiveRate') }}
              </div>
            </el-col>
            <el-col :span="6" :lg="8">
              <div
                class="light-color text-hide"
                :title="deviceActiveRate && deviceActiveRate.deviceCount"
              >
                {{ deviceActiveRate && deviceActiveRate.deviceCount }}
              </div>
              <div class="dark-color">{{ $t('table.totalDevice') }}</div>
            </el-col>
            <el-col :span="6" :lg="8">
              <div
                class="light-color text-hide"
                :title="deviceActiveRate && deviceActiveRate.totalActive"
              >
                {{ deviceActiveRate && deviceActiveRate.totalActive }}
              </div>
              <div class="dark-color">{{ $t('home.totalactive') }}</div>
            </el-col>
            <el-col :span="6" :lg="8">
              <div
                class="text-blue text-hide"
                :title="deviceActiveRate && deviceActiveRate.activeNum"
              >
                {{ deviceActiveRate && deviceActiveRate.activeNum }}
              </div>
              <div class="dark-color">{{ $t('table.activeDevice') }}</div>
            </el-col>
          </el-row>
          <!-- 设备活跃状态 -->
          <PieChart2
            v-if="deviceActiveRate"
            :device-active-rate="deviceActiveRate"
          />
          <NoData v-else />
        </div>
        <!-- 地图 -->
        <Location
          v-if="moduleTypeDistributionData"
          ref="locationMap"
          :map-id="'locationMap'"
          :location-info="moduleTypeDistributionData"
        />
        <NoData v-else />
      </div>
    </div>
    <footer>
      <div class="text-center">
        <el-link
          class="linkStyle"
          href="https://cn.neoway.com/"
          target="_blank"
          type="primary"
          >{{ $t('public.neoway') }}</el-link
        >
        <el-link
          class="linkStyle"
          href="https://iot.neoway.com/channel/#/dashboard"
          target="_blank"
          type="primary"
          >{{ $t('public.youfangInfoCenter') }}</el-link
        >
        <el-link
          class="linkStyle"
          href="https://iot.neoway.com/channel/#/guideDownload"
          target="_blank"
          type="primary"
          >{{ $t('public.networkMonitorAppDownload') }}</el-link
        >
      </div>
      <p class="text-center">
        {{ $t('home.Copyright', { version: defaultSettings.version }) }}
      </p>
    </footer>
  </div>
</template>

<script setup>
import PieChart2 from './component/PieChart2.vue'
import Location from './component/location.vue'
import defaultSettings from '@/settings'
import { getDeviceActiveRate, getCityConnection } from '@/api/home'

const loading = ref(false)
const levelArr = ref([
  {
    level: '0-1000',
    color: '#03D56F',
    url: g_utils.getViteImageUrl('home/point.png')
  },
  {
    level: '1001-5000',
    color: '#A5E33E',
    url: g_utils.getViteImageUrl('home/pointLeve1.png')
  },
  {
    level: '5000-10000',
    color: '#FDC111',
    url: g_utils.getViteImageUrl('home/pointLeve2.png')
  },
  {
    level: '10000-20000',
    color: '#F42140',
    url: g_utils.getViteImageUrl('home/pointLeve3.png')
  },
  {
    level: '20000-50000',
    color: '#CD09A7',
    url: g_utils.getViteImageUrl('home/pointLeve4.png')
  },
  {
    level: '50000-100000',
    color: '#A302EC',
    url: g_utils.getViteImageUrl('home/pointLeve5.png')
  },
  {
    level: g_t('home.above100000'),
    color: '#81182E',
    url: g_utils.getViteImageUrl('home/pointLeve6.png')
  }
])
const daysType = ref('1') // 日 ：1  月：30
const deviceActiveRate = ref(null)
const moduleTypeDistributionData = ref({
  locationdata: []
})
const userStore = useUserStore()
const { theme } = storeToRefs(useAppStore())
const { identifier, getBtnPerm } = storeToRefs(userStore)
const btnPermList = computed(() => getBtnPerm('/home'))

onMounted(() => {
  loading.value = true
  daysTypeUpdate()
  getCity()
})

const daysTypeUpdate = () => {
  loading.value = true
  getDeviceActiveRate({
    days: parseInt(daysType.value)
  }).then(({ code, data }) => {
    if (code === '200' && data) {
      deviceActiveRate.value = {
        rate: data.activePercent, // 在线率
        deviceCount: data.total, // 总
        totalActive: data.totalActive, // 累计活跃
        activeNum: data.active, // 活跃设备
        noActive: data.noActive // 不活跃设备
      }
    }
    loading.value = false
  })
}

// 获取全国连接
const getCity = () => {
  getCityConnection({
    tenant: identifier.value
  }).then(({ code, data }) => {
    if (code === '200' && data) {
      moduleTypeDistributionData.value.locationdata = data
    }
  })
}
</script>

<style lang="scss" scoped src="./index.scss"></style>
